<template>
	<div id="allDateSynclog">
		<div class="bottomLine">
			<span>同步信息列表</span>
			<at-button @click="toPath" class="toPathlog" type="primary"><span class="saas-icon-clock"></span>变更历史信息</at-button>
			<at-button @click='clear' class="clearLog" type="primary" :disabled="add.length == 0&& update.length == 0 && deletes.length == 0?true:false"><span class="saas-icon-icon-close"></span>清空同步信息</at-button>
		</div>
		<div class="inner">
			<span class="tittleTop">
				新增用户组信息
				<span :class="{'doubleNum':add.length.toString().length === 2, 'singleNum': add.length.toString().length === 1, 'more': add.length>99, 'common': true}">
	                <span class="infoCount" v-if="add.length<=99"> {{add.length}}</span>
	                <span class="infoCount" v-else>99+</span>
	            </span>
			</span>
			<div class="tableBorder">
				<at-table :data="add" @sort-change="sortChange" max-height="251" @filter-change="addFilter">
				<at-table-column prop="zr_time" column-key="add" label="更新时间" width='160' sortable="custom">
				</at-table-column>
				<at-table-column prop="auser_group_id" label="用户组ID">
				</at-table-column>
				<at-table-column prop="auser_group_name" label="用户组名称">
				</at-table-column>
				<at-table-column prop="count" label="组内人数">
				</at-table-column>
				<at-table-column prop="string_agg" label="覆盖角色">
				</at-table-column>
			</at-table>
			</div>
		</div>
		<div class="inner">
			<span class="tittleTop">
				修改用户组信息
				<span :class="{'doubleNum':update.length.toString().length === 2, 'singleNum': update.length.toString().length === 1, 'more': update.length>99, 'common': true}">
	                <span class="infoCount" v-if="update.length<=99"> {{update.length}}</span>
	                <span class="infoCount" v-else>99+</span>
	            </span>
			</span>
			<div class="tableBorder">
				<at-table :data="update" @sort-change="sortChange" max-height="251" @filter-change="upFilter">
				<at-table-column prop="zr_time" column-key="update" label="更新时间" width='160' sortable="custom">
				</at-table-column>
				<at-table-column prop="auser_group_id" label="用户组ID">
				</at-table-column>
				<at-table-column prop="auser_group_name" label="用户组名称">
				</at-table-column>
				<at-table-column prop="count" label="组内人数">
				</at-table-column>
				<at-table-column prop="string_agg" label="覆盖角色">
				</at-table-column>
			</at-table>
			</div>
		</div>
		<div class="inner">
			<span class="tittleTop">
				删除用户组信息
				<span :class="{'doubleNum':deletes.length.toString().length === 2, 'singleNum': deletes.length.toString().length === 1, 'more': deletes.length>99, 'common': true}">
	                <span class="infoCount" v-if="deletes.length<=99"> {{deletes.length}}</span>
	                <span class="infoCount" v-else>99+</span>
	            </span>
			</span>
			<div class="tableBorder">
				<at-table :data="deletes" @sort-change="sortChange" max-height="251" @filter-change="delFilter">
				<at-table-column prop="zr_time" column-key="delete" label="更新时间" width='160' sortable="custom">
				</at-table-column>
				<at-table-column prop="auser_group_id" label="用户组ID">
				</at-table-column>
				<at-table-column prop="auser_group_name" label="用户组名称">
				</at-table-column>
				<at-table-column prop="count" label="组内人数">
				</at-table-column>
				<at-table-column prop="string_agg" label="覆盖角色">
				</at-table-column>
			</at-table>
			</div>
		</div>
		<at-dialog title='提示' :visible.sync='suredeleteone' size='tiny'>
      <div class="dialog__body__content">
        <i class='saas-icon-cir-i'></i>确认清空
      </div>
      <div slot='footer' class='dialog-footer'>
        <at-button type='primary' @click.stop='deletemsgone'>确 定</at-button>
        <at-button @click.stop='cancel'>取 消</at-button>
      </div>
    </at-dialog>
	</div>
</template>
<script>
	import { mapState } from 'vuex'
	export default {
	  name: 'groupSync',
	  data () {
	    return {
	      suredeleteone: false
	    }
	  },
	  computed: {
	    ...mapState({
	      add: state => state.group.syncDategroup.addtable, // 列表数据
	      update: state => state.group.syncDategroup.uptable, // 列表数据
	      deletes: state => state.group.syncDategroup.deltable // 列表数据
	    })
	  },
	  methods: {
	    deletemsgone () {
	      this.$store.dispatch('group/delSyncgroup')
	      // this.getMessage()
	      this.suredeleteone = false
	    },
	    cancel () {
	      this.suredeleteone = false
	    },
	    toPath () {
	      this.$router.push('syncgroupLog')
	    },
	    clear () {
	      this.suredeleteone = true
	    },
	    addFilter (value) {
	      this.setFilter('add', value['trade_name'])
	    },
	    upFilter (value) {
	      this.setFilter('update', value['trade_name'])
	    },
	    delFilter (value) {
	      this.setFilter('del', value['trade_name'])
	    },
	    setFilter (type, value) {
	      this.$store.commit('group/syncFilters', value)
	      this.$store.dispatch('group/getSyncmessage', { 'type': type })
	    },
	    sortChange ({ column, prop, order }) {
	      if (prop) {
	        var data = {
	          'prop': prop,
	          'order': order.substring(0, order.length - 3)
	        }
	        this.$store.commit('group/syncOrdergroup', data)
	        if (column.columnKey === 'add') {
	          this.$store.dispatch('group/getSyncmessagegroup', { 'type': 'add' })
	        } else if (column.columnKey === 'update') {
	          this.$store.dispatch('group/getSyncmessagegroup', { 'type': 'update' })
	        } else {
	          this.$store.dispatch('group/getSyncmessagegroup', { 'type': 'delete' })
	        }
	      }
	    },
	    getMessage () {
	      this.$store.dispatch('group/getSyncmessagegroup', { 'type': 'add' })
	      this.$store.dispatch('group/getSyncmessagegroup', { 'type': 'update' })
	      this.$store.dispatch('group/getSyncmessagegroup', { 'type': 'delete' })
	    }
	  },
	  mounted () {
	    this.getMessage()
	  }
	}
</script>
<style scoped>
.dialog__body__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.saas-icon-cir-i {
  font-size: 20px;
  color: red;
  vertical-align: -5px;
  display: inline-block;
  margin-left: 0px;
  padding-right: 5px;
}
</style>